<template>
  <div>
    <!-- 顶部多条件搜索框 -->
    <el-form :inline="true" :model="fnameSearch" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="batchUp" :disabled="this.sels.length===0">启用</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="batchDown" :disabled="this.sels.length===0">禁用</el-button>
      </el-form-item>
      <el-form-item label="收费项目名" align>
        <el-select v-model="fnameSearch.fname" placeholder="请选择" filterable clearable>
          <el-option v-for="item in fnameList" :key="item.fnanme" :label="item.fname" :value="item.fname"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAllFnameButton">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 显示所有数据的表格 -->
    <el-table :data="feeNameList" style="width: 100%" @selection-change="selsChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="fnid" label="编号" width="100" align="center"></el-table-column>
      <el-table-column prop="fname" label="收费项目名" width="350" align="center"></el-table-column>
      <el-table-column prop="state" label="状态" width="350" align="center">
        <template scope="scope">
          <span v-if="scope.row.state === 1">
            <el-button type="success" circle>启用</el-button>
          </span>
          <span v-else-if="scope.row.state === 0">
            <el-button type="info" circle>禁用</el-button>
          </span>
        </template>
      </el-table-column>
      <!-- 操作栏 -->
      <el-table-column label="操作" align="center"> <!-- elementui中vue的&nbsp; 占位符不生效，可以使用搜狗输入法的‘空’特殊字符-->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑和新增 弹出的对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :model="fname" label-width="80px" :rules="dialogRules" ref="fnameUpOrAdd">
        <el-form-item label="收费项目名" prop="fname">
          <el-input v-model="fname.fname" placeholder="请输入收费项目名"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('fnameUpOrAdd')">取消</el-button>
        <el-button type="primary" @click="upOrAdd('fnameUpOrAdd')">提交</el-button>
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[2, 3, 4]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 查询
      fnameSearch: {},
      fnameList: [],
      // 分页数据
      pageIndex: 1,
      pageSize: 4,
      total: 0,
      // 展示
      feeNameList: [],
      sels: [], // 列表多选选中行
      // 弹出框
      dialogFormVisible: false,
      dialogTitle: "",
      dialogRules: {
        fname: [
          { required: true, trigger: 'blur', message: '请输入收费项目名' }
        ]
      },
      fname: {}
    }
  },
  methods: {
    selsChange: function (sels) {
      this.sels = sels;
    },
    handleSizeChange(val) {
      // 页大小改变，重新查询
      this.pageSize = val;
      this.getAllFname();
    },
    handleCurrentChange(val) {
      // 当前页改变，重新查询
      this.pageIndex = val;
      this.getAllFname();
    },
    // 获取分页和多条件查询展示的数据
    getAllFname() {
      this.$axios.post("/fname/findAll/" + this.pageIndex + "/" + this.pageSize, this.fnameSearch).then((resp) => {
        this.feeNameList = resp.data.data.beanList;
        this.total = resp.data.data.totalRecord;
      })
    },
    // 获取项目类别的名字来做查询
    getFnameList() {
      this.$axios.post("/fname/findFnameList").then((resp) => {
        this.fnameList = resp.data.data;
      })
    },
    getAllFnameButton() {
      this.pageIndex = 1;
      this.pageSize = 4;
      this.getAllFname();
    },

    // 新增对话框
    handleAdd() {
      this.dialogFormVisible = true;
      this.dialogTitle = "新增收费项目";
      this.fname = {};
    },

    // 编辑弹出带表单的对话框
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.dialogTitle = "编辑收费项目";
      // 回显编辑前的数据 ES6的语法
      this.fname = { ...row };
    },

    // 确认编辑或新增
    upOrAdd(formName) {
      //验证方法
      this.$refs[formName].validate((valid) => {
        //将refs中的数据放入validate校验器中验证，（valid）为一个回调函数
        //验证成功则发送请求传递给后端
        if (valid) {
          this.$axios.post("/fname/upOrAdd", this.fname).then((resp) => {
            if (resp.data.code == 200) {
              this.$message({
                message: JSON.stringify(resp.data.msg),
                type: 'success'
              })
              this.getAllFname();
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: JSON.stringify(resp.data.msg),
                type: 'warning'
              })
            }
          });          
        }
      });
    },
    // 关闭对话框
    closeDialog() {
      // 清空数据
      this.fname = {};
      // 清空前端验证的提示
      this.$refs.fnameUpOrAdd.resetFields();
    },
    // 对话框取消
    cancel(formName) {
      this.$refs[formName].clearValidate();
      this.dialogFormVisible = false
    },

    // 单行删除
    handleDel(index, row) {
      this.$confirm('确认删除该记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$axios.post('/fname/delById/' + row.fnid).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getAllFname();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 批量删除,逻辑删除，并没有真的删除，而是改变状态，后台不展示此状态的数据
    batchRemove() {
      var ids = this.sels.map(item => item.fnid);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let para = { ids: ids };
        this.$axios.patch('/fname/batchdel', ids).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getAllFname();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量启用
    batchUp() {
      var ids = this.sels.map(item => item.fnid);
      this.$confirm('确认启用选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let para = { ids: ids };
        this.$axios.patch('/fname/batchUp', ids).then((res) => {
          this.$message({
            message: '启用成功',
            type: 'success'
          });
          this.getAllFname();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消启用",
          });
        });
    },
    // 批量禁用
    batchDown() {
      var ids = this.sels.map(item => item.fnid);
      this.$confirm('确认禁用选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let para = { ids: ids };
        this.$axios.patch('/fname/batchDown', ids).then((res) => {
          this.$message({
            message: '禁用成功',
            type: 'success'
          });
          this.getAllFname();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消禁用",
          });
        });
    },
  },
  mounted() {
    this.getAllFname();
    this.getFnameList();
  },
};

</script>

<style>
</style>  